<%-- 
    Document   : newjsp
    Created on : Apr 28, 2012, 4:02:50 AM
    Author     : arturodr
--%>

<%@page import="com.northwind.beans.Categoria"%>
<%@page import="com.northwind.dto.ProductoDTO"%>
<%@page import="java.util.ArrayList"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html> 
<html> 
    <head> 
        <title>Productos</title> 
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    </head>
    <jsp:useBean id="listaProductos" scope="request" type="ArrayList<ProductoDTO>" />
    <jsp:useBean id="listaCategoria" scope="request" type="ArrayList<Categoria>" />
    <body>
        <div data-role="page" >

            <div data-role="header" data-position="inline">
                <a href="<%=request.getContextPath()%>/index.jsp" data-icon="back">Regresar</a>
                <h1>Productos</h1>
                <a href="<%=request.getContextPath()%>/ProductoServlet?accion=1" data-icon="add" data-theme="b">Añadir</a>
            </div><!-- /header -->

            <div data-role="content">	
                <ul data-role="listview" data-inset="true" data-filter="true">
                    <% for(ProductoDTO producto:listaProductos) { %>
                    <!-- El href lleva al servlet de edición (accion=2) -->
                    <li><a href="<%=request.getContextPath()%>/ProductoServlet?accion=2&idProducto=<%=producto.getIdProducto()%>">
                            <h1><%=producto.getNombreProducto()%></h1>
                            <p><%=producto.getNombreCategoria() %><br>
                                Stock: <%=producto.getStock() %><br>
                                Precio: <%=producto.getPrecio() %>
                            </p>
                            
                        </a></li>
                    <% } %>
                </ul>
            </div><!-- /content -->

            <div data-role="footer">
                <h1>Software para Telecomunicaciones 2</h1>
            </div><!-- /header -->

        </div>
    </body>
</html>
